<template>
	<div class="step1">
		<ul class="uls">
			<li class="lis">
				<div class="div1">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.investInfo.specialTypeChar">
						<el-form slot="reference">
							<el-form-item label="是否特殊品种">
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('specialTypeChar', '是否特殊品种', 'investInfo')">(未复核)</span>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div3">
					<el-checkbox-group v-model="specialType" @change="specialTypeChange" style="width: 100%" :disabled="isBaseDisabled">
						<el-checkbox key="wu" label="无" value="无" :checked="checked" @change="checked = !checked">无</el-checkbox>
						<el-checkbox
							:checked="checked"
							:disabled="cheDisedad"
							@change="checked = !checked"
							v-for="item in specialTypeList"
							:key="item.specialTypeId"
							:label="item.specialTypeId + ''"
							:value="item.specialTypeId + ''"
							>{{ item.specialTypeName }}</el-checkbox
						>
						<el-checkbox key="qita" :disabled="cheDisedad" label="其他" value="其他" :checked="checked" @change="checked = !checked"
							>其他</el-checkbox
						>
					</el-checkbox-group>
				</div>
			</li>

			<li class="lis">
				<div class="div2">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.investInfo.isContainSpclLimit">
						<el-form slot="reference">
							<el-form-item label="是否包含特殊投资限制">
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('isContainSpclLimit', '是否包含特殊投资限制', 'investInfo')"
										>(未复核)</span
									>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div2" :class="{ div3: !specialType.includes('其他') }">
					<el-radio-group v-model="investInfo.isContainSpclLimit" :disabled="isBaseDisabled" @change="investInfo.spclLimitRemark = ''">
						<el-radio label="0">是</el-radio>
						<el-radio label="1">否</el-radio>
					</el-radio-group>
				</div>
				<div class="div2" v-if="specialType.includes('其他')">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.investInfo.specialTypeName">
						<el-form slot="reference">
							<el-form-item label="其他-特殊品种名" required>
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('specialTypeName', '其他-特殊品种名', 'investInfo')">(未复核)</span>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div2" v-if="specialType.includes('其他')">
					<el-input v-model="investInfo.specialTypeName" :disabled="isBaseDisabled" @input="focusUpdate" />
				</div>
			</li>

			<li class="lis" v-if="investInfo.isContainSpclLimit === '0'">
				<div class="div1">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.investInfo.spclLimitRemark">
						<el-form slot="reference">
							<el-form-item label="特殊投资限制备注" required>
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('spclLimitRemark', '特殊投资限制备注', 'investInfo')">(未复核)</span>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div3">
					<el-input
						type="textarea"
						@input="focusUpdate"
						v-model="investInfo.spclLimitRemark"
						:disabled="isBaseDisabled"
						show-word-limit
						style="width: 100%"
					></el-input>
					<div class="blurmsg" v-if="isCheck && !!!investInfo.spclLimitRemark">请输入特殊投资限制备注</div>
				</div>
			</li>

			<li class="lis">
				<div class="div2">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.investInfo.stockMinRatio">
						<el-form slot="reference">
							<el-form-item label="股票类资产投资最低比例">
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('stockMinRatio', '股票类资产投资最低比例', 'investInfo')"
										>(未复核)</span
									>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div2">
					<el-input
						v-model="investInfo.stockMinRatio"
						@input="investmentInput('stockMinRatio')"
						:disabled="isBaseDisabled"
						placeholder="请输入（大于0且小于等于1的数值）"
					/>
				</div>
				<div class="div2">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.investInfo.stockMaxRatio">
						<el-form slot="reference">
							<el-form-item label="股票类资产投资最高比例">
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('stockMaxRatio', '股票类资产投资最高比例', 'investInfo')"
										>(未复核)</span
									>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div2">
					<el-input
						@input="investmentInput('stockMaxRatio')"
						v-model="investInfo.stockMaxRatio"
						:disabled="isBaseDisabled"
						placeholder="请输入（大于0且小于等于1的数值）"
					/>
				</div>
			</li>

			<li class="lis">
				<div class="div2">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.investInfo.bondMinRatio">
						<el-form slot="reference">
							<el-form-item label="债券类资产投资最低比例">
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('bondMinRatio', '债券类资产投资最低比例', 'investInfo')"
										>(未复核)</span
									>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div2">
					<el-input
						@input="investmentInput('bondMinRatio')"
						v-model="investInfo.bondMinRatio"
						:disabled="isBaseDisabled"
						placeholder="请输入（大于0且小于等于1的数值）"
					/>
				</div>
				<div class="div2">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.investInfo.bondMaxRatio">
						<el-form slot="reference">
							<el-form-item label="债券类资产投资最高比例">
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('bondMaxRatio', '债券类资产投资最高比例', 'investInfo')"
										>(未复核)</span
									>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div2">
					<el-input
						@input="investmentInput('bondMaxRatio')"
						v-model="investInfo.bondMaxRatio"
						:disabled="isBaseDisabled"
						placeholder="请输入（大于0且小于等于1的数值）"
					/>
				</div>
			</li>

			<li class="lis">
				<div class="div2">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.investInfo.currencyMinRatio">
						<el-form slot="reference">
							<el-form-item label="货币类资产投资最低比例">
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('currencyMinRatio', '货币类资产投资最低比例', 'investInfo')"
										>(未复核)</span
									>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div2">
					<el-input
						@input="investmentInput('currencyMinRatio')"
						v-model="investInfo.currencyMinRatio"
						:disabled="isBaseDisabled"
						placeholder="请输入（大于0且小于等于1的数值）"
					/>
				</div>
				<div class="div2">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.investInfo.currencyMaxRatio">
						<el-form slot="reference">
							<el-form-item label="货币类资产投资最高比例">
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('currencyMaxRatio', '货币类资产投资最高比例', 'investInfo')"
										>(未复核)</span
									>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div2">
					<el-input
						@input="investmentInput('currencyMaxRatio')"
						v-model="investInfo.currencyMaxRatio"
						:disabled="isBaseDisabled"
						placeholder="请输入（大于0且小于等于1的数值）"
					/>
				</div>
			</li>

			<li class="lis">
				<div class="div1">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.investInfo.hkStockMaxRatio">
						<el-form slot="reference">
							<el-form-item label="香港市场股票类资产投资最高比例">
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('hkStockMaxRatio', '香港市场股票类资产投资最高比例', 'investInfo')"
										>(未复核)</span
									>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div3">
					<el-input
						@input="investmentInput('hkStockMaxRatio')"
						v-model="investInfo.hkStockMaxRatio"
						:disabled="isBaseDisabled"
						placeholder="请输入（大于0且小于等于1的数值）"
					/>
				</div>
			</li>

			<li class="lis">
				<div class="div1">
					<el-popover placement="top-start" width="200" trigger="hover" :content="$store.getters.hoverPerty.investInfo.remark">
						<el-form slot="reference">
							<el-form-item label="备注">
								<span v-if="['6'].includes(dataType)">
									<span style="color: red" v-if="publicCompare('remark', '投资相关-备注', 'investInfo')">(未复核)</span>
								</span>
							</el-form-item>
						</el-form>
					</el-popover>
				</div>
				<div class="div3">
					<el-input
						type="textarea"
						@input="focusUpdate"
						v-model="investInfo.remark"
						:disabled="isBaseDisabled"
						show-word-limit
						style="width: 100%"
					></el-input>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
import { saveInvest } from '@/api/productApi/infoMain'
import { getSpecialTypeInfo } from '@/api/productApi/infoMain'
import { publicCompare } from '@/views/infoMain/specialList/components/dataCheck'
import { inverReview } from '@/views/infoMain/specialList/components/dataReview'
import { jsonArray } from '@/api/productApi/file'
export default {
	props: {
		setpFunc: {
			type: Function,
			default: Function
		},
		fundSysCode: {
			type: String,
			default: ''
		},
		dataType: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			investInfo: {
				// 投资相关信息
				isContainSpclLimit: ''
			},
			specialType: [], // 特殊类型-用来存取变化后的特殊类型
			specialTypeList: [], // 特殊品种类型List
			specialOther: false,
			isBaseDisabled: false,
			isCheck: false,
			checked: false,
			publicCompare,
			cheDisedad: false
		}
	},
	mounted() {
		this.getSpecialTypeInfo()
	},
	methods: {
		focusUpdate() {
			this.$forceUpdate()
		},

		// 重新申请将数据集中在store
		updateStoreData() {
			const arr = [...this.specialType]
			this.investInfo.specialTypeChar = arr.toString()
			this.$store.state.fundStep.specialtTotalData.productFundApply.investInfo = this.investInfo
		},

		// 完善信息切换步骤时保存切换前页面数据
		async switchingSteps() {
			if (this.specialType.includes('其他')) {
				if (!this.investInfo.specialTypeName) {
					this.$message({ type: 'error', message: '请填写 其他-特殊品种名' })
					return false
				}
			} else {
				const params = { productFundApply: {}, fundRaiseType: '2' }
				params.productFundApply.investInfo = this.investInfo
				params.fundSysCode = this.fundSysCode
				params.productFundApply.investInfo.specialTypeChar = [...this.specialType].toString()
				await saveInvest(params).then(res => {
					if (res.msgCode === 'Y') {
						this.$emit('setpFunc', '1', this.fundSysCode, '', 1)
					}
				})
				return true
			}
		},

		ValidationRequired() {
			return inverReview(this.investInfo)
		},

		// 新增:【保存】和【下一步】
		startDown(type) {
			this.isCheck = true
			if (this.specialType.includes('其他')) {
				if (!this.investInfo.specialTypeName) {
					this.$message({ type: 'warning', message: '请填写 其他-特殊品种名' })
					return
				}
			}
			this.CustomtextComfirm(() => {
				const params = { productFundApply: {}, fundRaiseType: '2' }
				params.productFundApply.investInfo = this.investInfo
				params.fundSysCode = this.fundSysCode
				params.productFundApply.investInfo.specialTypeChar = [...this.specialType].toString()
				saveInvest(params).then(res => {
					if (res.msgCode === 'Y') {
						this.getSpecialTypeInfo()
						if (type === '下一步') {
							this.$emit('setpFunc', '1', this.fundSysCode, '', 0)
						} else {
							this.$emit('setpFunc', '1', this.fundSysCode, '', 1)
						}
						this.$message({ type: 'success', message: res.msg })
					}
				})
			}, `${!inverReview(this.investInfo).length ? '此操作将永久提交已编辑数据，是否继续' : `必填项 “ ${inverReview(this.investInfo).join('、')} ” 未填写，是否确认提交`}？`)
		},

		isBaseDisabledCom(data, msgShow) {
			this.isBaseDisabled = data
			this.isCheck = msgShow
		},

		edit(data) {
			this.investInfo = jsonArray(data)
			this.specialType = this.investInfo.specialTypeChar ? this.investInfo.specialTypeChar.split(',') : []
		},

		investmentInput(value) {
			// 规定只能输入小于等于1的职
			if (/[^\d^\.]+/g.test(Number(this.investInfo[value]))) {
				this.investInfo[value] = ''
			} else {
				if (this.investInfo[value] > 1) {
					this.investInfo[value] = 1
				}
			}
		},

		specialTypeChange() {
			this.specialOther = this.specialType.includes('无')
			this.cheDisedad = this.specialType.includes('无')
			this.specialType = this.specialType.includes('无') ? ['无'] : this.specialType
		},

		// 查询-特殊品种类型
		getSpecialTypeInfo() {
			getSpecialTypeInfo().then(res => {
				if (res.msgCode === 'Y') {
					this.specialTypeList = res.data.body
				}
			})
		}
	}
}
</script>
<style lang="scss" scoped >
</style>
